<template>
    <div>
        <div class="width-75 tc z-header fs-36 flex">
            <p class="lt" @click="$router.back(-1)">
                <i class="iconfont icon-zuo m-t-18"></i>
            </p>
            <p>编辑个人资料</p>
            <p class="fs-30" @click="finish">完成</p>
        </div>
        <div class="index-blank"></div>
        <nav>
            <ul>
                <li class="persinal-portrait bb-1-e">
                    <div class="flex width-75">
                        <div>
                            头像
                        </div>
                        <div class="row">
                            <div class="m-t-1">
                                <input type="file" accept="image/*" multiple="multiple" @change="updatePortrait($event)" class="file-Portrait">
                                <img :src="imgcode" alt="" class="portrait" v-if="imgcode != null">
                                <img src="../img/logo.png" alt="" class="portrait" v-if="imgcode == null">
                            </div>
                            <div>
                                <i class="iconfont icon-you1"></i>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="z-header width-75 bb-1-e">
                    <span>
                        昵称
                    </span>
                    <input type="text" placeholder="请填写" class="b-0" v-model="name">
                </li>
                <li class="z-header width-75 flex bb-1-e" @click="isShow">
                    <div>
                        <span>性别</span>
                        <span class="c-9 m-l-14">点击更换 : {{sex}}</span>
                    </div>
                    <div>
                        <i class="iconfont icon-you1"></i>
                    </div>
                </li>
                <li class="z-header width-75 flex bb-1-e">
                    <div>
                        <span>年龄</span>
                        <input type="text" placeholder="请填写" class="b-0" v-model="age">
                    </div>
                    <div>
                        <i class="iconfont icon-you1"></i>
                    </div>
                </li>
                <li class="width-75">
                    <textarea name="" id="" cols="30" rows="10" class="persinal-textarea b-0" placeholder="个人说明" v-model="explain"></textarea>
                </li>
            </ul>
        </nav>
        <!--性别-->
        <div class="education" v-if="isSex">
            <mt-picker :slots="slots" class="education-choice" @change="onValuesChange"></mt-picker>
            <div class="ascertain" @click="isShow">
                确定
            </div>
        </div>
    </div>
</template>
<script>
import { z } from '../assets/js/common'
import { MessageBox } from 'mint-ui';
export default {
    data() {
        return {
            portrait: "../img/portrait.png",
            slots: [    //学历种类
                {
                    flex: 1,
                    values: ['男', '女'],
                    className: 'slot1'
                }
            ],
            isSex: false,
            sex: "",//性别
            age: "", //年龄
            name: "",//名字
            explain: "",//个人说明
            imgcode:""
        }
    },
    methods: {
        updatePortrait(e) {
            var file = e.target.files[0];
            var filesize = file.size;
            var filename = file.name;
            // 2,621,440   2M
            if (filesize > 2101440) {
                // 图片大于2MB

            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = (e) => {
                // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
                var imgcode = e.target.result;
                console.log(imgcode);

                var params = new URLSearchParams();
                params.append("im", imgcode);
                this.$http({
                    method: 'post',
                    url: localPath + '/student/updatePortrait',
                    data: params
                }).then((response) => {
                    // MessageBox.alert(response.data.message);
                    this.my();
                    console.log(response.data.message);
                }).catch((error) => {
                    console.log(error);
                })
            }
        },
        isShow() {
            this.isSex = !this.isSex;
        },
        onValuesChange(picker, values) {//性别
            this.sex = values[0];
        },
        finish() {
             var params = new URLSearchParams();
            params.append("nickName", this.name);
            params.append("motto", this.explain);
            params.append("sex", this.sex);
            params.append("age", this.age);
            
            this.$http({
                method:'post',
                url:localPath + '/student/updateUser',
                data:params
            }).then((response) =>{
                 MessageBox.alert(response.data.message);
                console.log(response);
            }).catch((error) =>{
                console.log(error);
            })
        },
        my() {
            this.$http({
                method: "post",
                url: localPath + "/student/getMyUser"
            }).then((data) => {
                
               this.imgcode=data.data.message.portrait
                console.log(this.imgcode);
            }).catch((error) => {
                console.log(error);
            })
        }
    },
    mounted() {
        this.my();
        document.addEventListener(z());
    }

}
</script>
<style>
.persinal-portrait {
    height: 1.2rem;
    line-height: 1rem;
}

.persinal-textarea {
    width: 100%;
    font-family: PingFang-SC-Regular;
}

.file-Portrait {
    width: .87rem;
    height: .87rem;
    position: absolute;
    opacity: 0;
}
</style>
